<template>
    <div class="mycollection">
      <div v-if="haveorno == 1">
        <scroll class="wrapper" :data="collectionlist" :pullup="pullup" :pulldown="pulldown" @pulldown="loadData"  @pullup="nextpage">

        <CollectionList  :collectionlist="collectionlist"></CollectionList>
        <PageTip :tipshow="tipshow" ></PageTip>
        </scroll>

      </div>
      <Nothing v-if="haveorno == 0">
        <template #texttip>你还没有任何收藏</template>
        <template #imgtip><img src="./../../assets/img/noanylesson.png" alt=""></template>
      </Nothing>
      <GuangGuang  v-if="haveorno == 0" ></GuangGuang>
    </div>
</template>

<script>
import CollectionList from './components/CollectionList.vue'
import Nothing from './../MyDiscount/components/Nothing'
import GuangGuang from './../MyDiscount/components/GuangGuang'
import Scroll from "@/components/Scroll"
import PageTip from "./../MoreBoom/components/PageTip"
import {getCollectorListByUser} from '@/api/fetch'

export default {
  name: 'MyCollection',
  data () {
    return {
      haveorno: 1,
      tipshow:1,
      page:1,
      pullup:true,
      pulldown:true,
      collectionlist: [

      ]
    }
  },
  methods: {
    loadData(){
      this.tipshow=1
      this.getCollectorListByUser(1).then( res =>{
        if (res.data.length > 0) {
          this.haveorno = 1
          this.collectionlist = res.data
        } else {
          this.haveorno = 0
        }
      })
    },
    nextpage(){
      this.page=this.page+1
      this.getCollectorListByUser(this.page).then(res=>{
        if(res.data.length > 0){
          this.collectionlist = this.collectionlist.concat(res.data)
        }else {
          this.page=this.page-1
          this.tipshow = 0
        }
      })
    },

    async getCollectorListByUser (thepage) {
      const res = await getCollectorListByUser({
        page: thepage
      })
      console.log(res)
      return res
    }
  },
  components: {
    CollectionList,
    Nothing,
    GuangGuang,
    Scroll,
    PageTip
  },
  activated () {
    this.loadData()
  }
}
</script>
<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';
  .wrapper {
    height: 95vh;
    overflow: hidden;
  }
  .mycollection{
    .h100();
  }
</style>
